import { useEffect, useState } from "react"
import { Outlet, useMatch, useMatches } from "react-router-dom"
import Mian from "../components/mian"
function Dian(){
    let matches=useMatches()
    let crumbs=matches.filter(item=> item.handle.title).map(item=>item.handle.title).join('>')
    let [val,setVal]=useState()
    let [list,setList]=useState([
        {id:1,name:'晨读30分钟',is:false},{id:2,name:'早期跑步',is:false}
    ])
    let [newlist,setNewlist]=useState(list)
    let [del,setDel]=useState([])
    let [flag,setFlag]=useState(false)
    useEffect(()=>{
        setNewlist(list)
    },[list])
    let add=(e)=>{
        if(e.keyCode==13){
             setVal(e.target.value)
             let obj={
                 id:newlist.length+1,
                 name:e.target.value,
                 is:false
             }
             e.target.value=''
             list.push(obj)
             setList([...list])
        }
    }
    let changeOne=(e,id)=>{
        let item=newlist.find(v=>v.id==id)
        item.is=!item.is
        setNewlist([...newlist])
       let a= newlist.every(v=>v.is)
       setFlag(a)
    }
    let changeAll=(e)=>{
        setFlag(e.target.checked)
        newlist.forEach(v=>v.is=e.target.checked)
        setNewlist([...newlist])
    }
    console.log(list)
    console.log(newlist)
    return(
        <div>
            <input type="text" onKeyDown={add}/>
            <ul>
                {
                    newlist.map(item=>{ 
                        return (
                             <li key={item.id}>
                    <input type="checkbox" name="" id="" checked={item.is} onChange={(e)=>changeOne(e,item.id)}/>
                    <span>{item.name}</span>
                    <span onClick={()=>{
                        let index=list.findIndex(c=>c.id==item.id)
                        list.splice(index,1)
                        setList([...list])
                    }}>删除</span>

                </li>
                        )
                    })
                }
               
            </ul>
            <footer>
            <input type="checkbox" name="" id="" checked={flag} onChange={(e)=>changeAll(e)}/>
            <button onClick={()=> setNewlist(list)}>全部</button>
            <button onClick={()=> {
               setNewlist(list.filter(v=>v.is))
            }}>已完成</button>
            <button onClick={()=> {
               setNewlist(list.filter(v=>!v.is))
            }}>未完成</button>
            <button  onClick={()=>{
                setNewlist([])
                        setList([])
                    }}>删除</button>
                <button >回收站</button>
            </footer>
            <Mian></Mian>
            <Outlet/>
        </div>
    )
}
export default Dian